body{
	margin:0;
	color:#444;
	background: -webkit-linear-gradient(top, #e1f1fd 0%,#b7daf5 20%,#aed4f0 28%, rgb(116, 114, 114) 100%);
	background: -linear-gradient(top, #e5f1fa 0%,#b7daf5 20%,#aed4f0 35%, rgb(87, 86, 86) 100%);
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}


.car .mirror-wrap:before,
.car .mirror-wrap:after,
.car .mirror-inner:before,
.car .mirror-inner:after,
.car .middle .top:before,
.car .middle .top:after,
.car .lights:before,
.car .lights:after,
.car .bumper .top:before,
.car .bumper .top:after,
.car .bumper .middle:before,
.car .tyres .tyre:before,
.car .tyres .tyre:after,
.plane .fan,
.plane .wheel .left,
.plane .wheel .right,
.plane .wings:before,
.plane .wings:after,
.plane .wheel .left:before,
.plane .wheel .right:after{
	background:rgb(236, 23, 87);
}
.cloud .line-b:before,
.cloud .line-b:after,
.cloud .line-d:before,
.cloud .line-d:after,
.plane .wings:before,
.plane .wings:after,
.plane .cat .legs:before,
.plane .cat .legs:after,
.plane .wheel .left:before,
.plane .wheel .right:after,
.plane .fan .fan-wings .fan-a:before,
.plane .fan .fan-wings .fan-b:before,
.plane .fan .fan-wings .fan-c:before,
.plane .fan .fan-wings .fan-d:before{
	content:'';
	position:absolute;
}



/*Time to finalise the cloud shape*/
.cloud {
	width: 60px; height: 40px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 50px; height: 30px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 12px; height: 12px;
	top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.x1 {
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.8; /*opacity proportional to the size*/
	
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}

.x3 {
	/* left: -250px; top: -200px; */
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}

.x4 {
	/* left: 470px; top: -250px; */
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.95; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 18s linear infinite;
	-moz-animation: moveclouds 18s linear infinite;
	-o-animation: moveclouds 18s linear infinite;
}

.x5 {
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
.plane{
	z-index:5;
	width:275px;
	height:130px;
	position:relative;
	margin:50px auto 0;
	-webkit-animation:plane-move 10s infinite;
	        animation:plane-move 10s infinite;
	-webkit-animation-fill-mode:backwards;
	        animation-fill-mode:backwards;
}

.plane .wings{
	height:52px;
	position:relative;
}
.plane .wings:before,
.plane .wings:after{
	height:5px;
	width:100%;
	border-radius:3px;
}
.plane .wings:before{
	top:0;
}
.plane .wings:after{
	bottom:0;
	height:4px;
}


.plane .fan{
	left:50%;
	z-index:1;
	width:50px;
	height:50px;
	bottom:-25px;
	border-radius:50%;
	margin-left:-25px;
	position:absolute;
}
.plane .fan .fan-wings{
	top:50%;
	left:50%;
	width:110px;
	height:110px;
	overflow:hidden;
	margin-top:-55px;
	position:absolute;
	margin-left:-55px;
	border-radius:50%;
}
.plane .fan .fan-wings .fan-a,
.plane .fan .fan-wings .fan-b,
.plane .fan .fan-wings .fan-c,
.plane .fan .fan-wings .fan-d{
	width:inherit;
	height:inherit;
	position:absolute;
	-webkit-animation:engine-start 1s infinite;
	        animation:engine-start 1s infinite;
}
.plane .fan .fan-wings .fan-a{
	-webkit-animation-duration:.2s;
	        animation-duration:.2s;
}
.plane .fan .fan-wings .fan-b{
	-webkit-animation-duration:.4s;
	        animation-duration:.4s;
}
.plane .fan .fan-wings .fan-c{
	-webkit-animation-duration:.4s;
	        animation-duration:.4s;
}
.plane .fan .fan-wings .fan-d{
	-webkit-animation-duration:.2s;
	        animation-duration:.2s;
}
.plane .fan .fan-wings .fan-a:before,
.plane .fan .fan-wings .fan-b:before,
.plane .fan .fan-wings .fan-c:before,
.plane .fan .fan-wings .fan-d:before{
	top:50%;
	left:50%;
	height:55px;
	width:110px;
	margin-top:-55px;
	margin-left:-55px;
	border-radius:110px 110px 0 0;
	background:rgba(255,255,255,.4);
}
.plane .fan .fan-wings .fan-a:before{
	right:0;
	width:55px;
	height:110px;
	border-radius:110px 0 0 110px;
}
.plane .fan .fan-wings .fan-b:before{
	right:0;
	height:55px;
	width:110px;
	border-radius:110px 110px 0 0;
}
.plane .fan .fan-wings .fan-c:before{
	left:100%;
	width:55px;
	height:110px;
	border-radius:0 110px 110px 0;
}
.plane .fan .fan-wings .fan-d:before{
	top:100%;
	width:110px;
	height:55px;
	border-radius:0 0 110px 110px;
}
.plane .cat{
	bottom:0;
	z-index:2;
	width:22px;
	right:35px;
	height:20px;
	position:absolute;
	background:#1c1c1c;
	-webkit-transform:translateX(0);
	    -ms-transform:translateX(0);
	        transform:translateX(0);
	border-radius:15px 15px 0 0;
	-webkit-animation:cat-move 10s infinite;
	        animation:cat-move 10s infinite;
}
.plane .cat:before{
	content:'';
	width:0;
	height:0;
	top:-5px;
	position:inherit;
	border:11px solid #1c1c1c;
	border-top:10px solid transparent;
}
.plane .cat .legs{
	bottom:0;
	height:20px;
	width:inherit;
	position:inherit;
}
.plane .cat .legs:before,
.plane .cat .legs:after{
	top:12px;
	width:5px;
	height:17px;
	background:#1c1c1c;
	border-bottom:4px solid #f6f7f7;
}
.plane .cat .legs:before{
	left:-5px;
	border-radius:6px 0 2px 2px;
}
.plane .cat .legs:after{
	right:-5px;
	border-radius:0 6px 2px 2px;
}

.plane .wheel{
	height:78px;
}
.plane .wheel .left,
.plane .wheel .right{
	bottom:0;
	width:10px;
	height:20px;
	border-radius:5px;
	position:absolute;
}
.plane .wheel .left{
	left:60px;
}
.plane .wheel .right{
	right:60px;
}
.plane .wheel .left:before,
.plane .wheel .right:after{
	top:-15px;
	width:78px;
	height:2px;
}
.plane .wheel .left:before{
	left:-5px;
	-webkit-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	    transform:rotate(-45deg);
}
.plane .wheel .right:after{
	right:-5px;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	    transform:rotate(45deg);
}
@-webkit-keyframes engine-start{
	0%{
		-webkit-transform:rotate(0deg);
		        transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(-360deg);
		        transform:rotate(-360deg);
	}
}
@keyframes engine-start{
	0%{
		-webkit-transform:rotate(0deg);
		        transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(-360deg);
		        transform:rotate(-360deg);
	}
}
@-webkit-keyframes plane-move{
	10%{
		-webkit-transform:rotate(0deg) translateY(0px);
		        transform:rotate(0deg) translateY(0px);
	}
	20%{
		-webkit-transform:rotate(-4deg) translateY(10px);
		        transform:rotate(-4deg) translateY(10px);
	}
	30%{
		-webkit-transform:rotate(0deg) translateY(0);
		        transform:rotate(0deg) translateY(0);
	}
	40%{
		-webkit-transform:rotate(0deg) translateY(-4px);
		        transform:rotate(0deg) translateY(-4px);
	}
	50%{
		-webkit-transform:rotate(0deg) translateY(0);
		        transform:rotate(0deg) translateY(0);
	}
	90%{
		-webkit-transform:rotate(8deg) translateY(0);
		        transform:rotate(8deg) translateY(0);
	}
	100%{
		-webkit-transform:rotate(12deg) translateY(5px);
		        transform:rotate(10deg) translateY(5px);
	}
}
@keyframes plane-move{
	10%{
		-webkit-transform:rotate(0deg) translateY(0px);
		        transform:rotate(0deg) translateY(0px);
	}
	20%{
		-webkit-transform:rotate(-4deg) translateY(10px);
		        transform:rotate(-4deg) translateY(10px);
	}
	30%{
		-webkit-transform:rotate(0deg) translateY(0);
		        transform:rotate(0deg) translateY(0);
	}
	40%{
		-webkit-transform:rotate(0deg) translateY(-4px);
		        transform:rotate(0deg) translateY(-4px);
	}
	50%{
		-webkit-transform:rotate(0deg) translateY(0);
		        transform:rotate(0deg) translateY(0);
	}
	90%{
		-webkit-transform:rotate(8deg) translateY(0);
		        transform:rotate(8deg) translateY(0);
	}
	100%{
		-webkit-transform:rotate(10deg) translateY(5px);
		        transform:rotate(12deg) translateY(5px);
	}
}
@-webkit-keyframes cat-move{
	10%{
		height:20px;
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	20%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	30%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	40%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	50%{
		height:20px;
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	90%{
		-webkit-transform:translate(20px,0) rotate(0);
		        transform:translate(20px,0) rotate(0);
	}
	95%{
		height:30px;
		-webkit-transform:translate(0,-20px) rotate(360deg);
		        transform:translate(0,-20px) rotate(360deg);
	}
	100%{
		height:25px;
		-webkit-transform:translate(0,-15px) rotate(0);
		        transform:translate(0,-15px) rotate(0);
	}
}
@keyframes cat-move{
	10%{
		height:20px;
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	20%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	30%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	40%{
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	50%{
		height:20px;
		-webkit-transform:translate(0) rotate(0);
		        transform:translate(0) rotate(0);
	}
	90%{
		-webkit-transform:translate(20px,0) rotate(0);
		        transform:translate(20px,0) rotate(0);
	}
	95%{
		height:30px;
		-webkit-transform:translate(0,-20px) rotate(360deg);
		        transform:translate(0,-20px) rotate(360deg);
	}
	100%{
		height:25px;
		-webkit-transform:translate(0,-15px) rotate(0);
		        transform:translate(0,-15px) rotate(0);
	}
}




.road-wrap{
	-webkit-perspective:160px;
	        perspective:160px;
}
.road-wrap .road{
	margin-top:-360px;
	-webkit-transform:rotateX(80deg);
	        transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
	-webkit-animation:steer 4s linear infinite;
	        animation:steer 4s linear infinite;
}
.road-wrap .lane{
	width:20px;
	margin:auto;
}
.road-wrap .lane>div{
	width:100%;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	background-color:#fff;
	-webkit-animation:lane 4s linear infinite;
	        animation:lane 4s linear infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}

@-webkit-keyframes shine{
	0%,80%,100%{
		-webkit-transform:translateX(-55px) rotate(24deg);
		        transform:translateX(-55px) rotate(24deg);
	}
	5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
	0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
	33%,44%{
		-webkit-transform:translateX(30px) rotate(-14deg);
		        transform:translateX(30px) rotate(-14deg);
	}
	66%{
		-webkit-transform:translateX(0px) rotate(-10deg);
		        transform:translateX(0px) rotate(-10deg);
	}
}

@keyframes shine{
	0%,80%,100%{
		-webkit-transform:translateX(-55px) rotate(24deg);
		        transform:translateX(-55px) rotate(24deg);
	}
	5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{background-color:#2d2d2d}
	0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{background-color:#4d4d4d}
	33%,44%{
		-webkit-transform:translateX(30px) rotate(-14deg);
		        transform:translateX(30px) rotate(-14deg);
	}
	66%{
		-webkit-transform:translateX(0px) rotate(-10deg);
		        transform:translateX(0px) rotate(-10deg);
	}
}
@-webkit-keyframes lane{
	0%{
		-webkit-transform:translateY(320px);
		        transform:translateY(320px);
	}
	100%{
		-webkit-transform:translateY(-160px);
		        transform:translateY(-160px);
	}
}
@keyframes lane{
	0%{
		-webkit-transform:translateY(320px);
		        transform:translateY(320px);
	}
	100%{
		-webkit-transform:translateY(-160px);
		        transform:translateY(-160px);
	}
}
@-webkit-keyframes steer{
	0%,100%{
		-webkit-transform:translateX(-15px) rotate(5deg);
		        transform:translateX(-15px) rotate(5deg);
	}
	50%{
		-webkit-transform:translateX(15px) rotate(-5deg);
		        transform:translateX(15px) rotate(-5deg)
	}
}
@keyframes steer{
	0%,100%{
		-webkit-transform:translateX(-15px) rotate(5deg);
		        transform:translateX(-15px) rotate(5deg);
	}
	50%{
		-webkit-transform:translateX(15px) rotate(-5deg);
		        transform:translateX(15px) rotate(-5deg)
	}
}
@-webkit-keyframes suspension{
	0%,75%,100%{
		-webkit-transform:rotate(3deg);
		        transform:rotate(3deg)
	}
	10%,30%,50%,70%,90%{top:0}
	20%,40%,60%,80%,100%{top:-1px}
	25%,50%{
		-webkit-transform:rotate(-3deg);
		        transform:rotate(-3deg)
	}
	20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
}
@keyframes suspension{
	0%,75%,100%{
		-webkit-transform:rotate(3deg);
		        transform:rotate(3deg)
	}
	10%,30%,50%,70%,90%{top:0}
	20%,40%,60%,80%,100%{top:-1px}
	25%,50%{
		-webkit-transform:rotate(-3deg);
		        transform:rotate(-3deg)
	}
	20%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
	90%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}
}


/* 时间报表 */
.clock {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 60%;
	width: 70%;
	height: 100px;
	background-color: rgba(255,255,255,.1);
	color: #fff;
	/* font-weight: 700;
	font-size: 5.8rem; */
	text-align: center;
	line-height: 100px;
	/* border-radius: 50%; */
}


/* 模态框 */
/* 时间报表 */
.motaikuang {
	position: absolute;
	display: none;
	left: 50%;
	transform: translateX(-50%);
	top: 1%;
	width: 80%;
	height: 70%;
	/* background-color: rgb(204, 204, 204); */
	background: rgba(255,255,255,.1);
	border-radius: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 5.8rem;
	z-index: 5;
}
.motaikuang h3 {
	padding: 7px 5px;
	font-size: 1.506667rem;
	text-align: center;
}
.motaikuang .wrap {
	margin: 0 auto;
	width: 80%;
	
}

.motaikuang .wrap>div{
	/* display: inline-block; */

	float: left;
	margin-right: 2px;
	margin-top: 2px;
	width: 49%;
	height: 40%;
}
.motaikuang .wrap .wenzi {
	margin-top: 150px;
	font-size: 13px;
	width: 100%;
}
.motaikuang .wrap .btn {
	margin-top: 10px;
	font-size: 16px;
	padding-top: 3px;
	line-height: 16px;
	background: linear-gradient(to right,#9198e5,#53dafc);
	width: 100%;
	height: 30px;
	border-radius: 10px;
	text-align: center;
	border: 2px solid steelblue;
	cursor: pointer;
}
.motaikuang .wrap .close {
	margin-top: 10px;
	font-size: 16px;
	padding-top: 3px;
	line-height: 16px;
	background: linear-gradient(to left,#9198e5,#53dafc);
	width: 100%;
	height: 30px;
	border-radius: 10px;
	text-align: center;
	border: 2px solid steelblue;
	cursor: pointer;
}
.motaikuang .wrap>div img {
	width: 100%;
	background-size: contain;
}
/* .motaikuang .wrap>div:nth-child(1){
	background: url(../images/bieji.png);
}
.motaikuang .wrap>div:nth-child(2){
	background: url(../images/bieji.png);
}
.motaikuang .wrap>div:nth-child(3){
	background: url(../images/bieji.png);
}
.motaikuang .wrap>div:nth-child(4){
	background: url(../images/bieji.png);
} */